<%@ page import="java.util.*" language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>标签管理系统 - 首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- basic styles -->
    <link href="${basePath}/ACE/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="${basePath}/ACE/css/font-awesome.min.css" />
    <!--[if IE 7]>
		  <link rel="stylesheet" href="${basePath}/ACE/css/font-awesome-ie7.min.css" />
		<![endif]-->
    <!-- page specific plugin styles -->
    <!-- fonts -->
    <!-- ace styles -->
    <link rel="stylesheet" href="${basePath}/ACE/css/ace.min.css" />
    <link rel="stylesheet" href="${basePath}/ACE/css/ace-rtl.min.css" />
    <link rel="stylesheet" href="${basePath}/ACE/css/ace-skins.min.css" />
    <!--[if lte IE 8]>
		  <link rel="stylesheet" href="${basePath}/ACE/css/ace-ie.min.css" />
		<![endif]-->
    <!-- inline styles related to this page -->
    <!-- ace settings handler -->
    <script src="${basePath}/ACE/js/ace-extra.min.js"></script>
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
		<script src="${basePath}/ACE/js/html5shiv.js"></script>
		<script src="${basePath}/ACE/js/respond.min.js"></script>
		<![endif]-->

</head>
<body>
    <div class="main-container" id="main-container">
        <div class="main-container-inner">
            <div class="breadcrumbs" id="breadcrumbs">
                <ul class="breadcrumb">
                    <li><i class="icon-home home-icon"></i><a href="welcome.htm">首页</a> </li>
                    <li><a href="#">图书管理</a> </li>
                    <li class="active">新增图书</li>
                </ul>
                <!-- .breadcrumb -->
            </div>
            <div class="page-content">
            	<a href="${basePath }/book/importExcel.do" class="btn">导入图书信息</a>
                <div class="row">
                    <div class="col-xs-12">
                        <!-- PAGE CONTENT BEGINS -->
                        <div class="col-xs-12">
                            <!-- PAGE CONTENT BEGINS -->
                            <form role="form" class="form-horizontal" action="" method="post" enctype="multipart/form-data">
                            <input type="hidden" name="bid" value="${book.bid }" />
                            <div class="form-group">
                                <label for="bname" class="col-xs-2 control-label no-padding-right">
                                                                                                图书名称:
                                </label>
                                <div class="col-xs-10">
                                    <input type="text" class="col-xs-8" name="bname" value="${book.bname }"  placeholder="图书的名称" id="bname"  required/>                                    
                                </div>
                            </div>
                            <div class="space-4">
                            </div>
                            <div class="form-group">
                                <label for="ddlCate1" class="col-xs-2 control-label no-padding-right">
                                                                                                  图书分类:
                                </label>
                                <div class="col-xs-10">
                                    <select class="col-xs-8" name="cid">	                                    
	                                    <c:forEach items="${ca }" var="c">	                                    
	                                    <option value="${c.cid}" <c:if test="${book.cid==c.cid }">selected</c:if>>${c.cname }</option>
	                                    </c:forEach>                                  
                                    </select>
                                </div>
                            </div>
                            <div class="space-4">
                            </div>
                            <div class="form-group">
                                <label for="author" class="col-xs-2 control-label no-padding-right">
                                                                                     图书作者:
                                </label>
                                <div class="col-xs-10">
                                   <input type="text" class="col-xs-8" name="author" value="${book.author }" placeholder="图书作者" id="author" /> 
                                </div>
                            </div>
                            <div class="space-4">
                            </div>
                            <div class="form-group">
                                <label for="publishTime" class="col-xs-2 control-label no-padding-right">
                                                                                   出版时间:
                                </label>
                                <div class="col-xs-10">
                                   <input type="text" class="col-xs-8" name="publishTime" value="${book.publishTime }" placeholder="出版时间" id="publishTime" /> 
                                </div>
                            </div>
                            <div class="space-4">
                            </div>
                            <div class="form-group">
                                <label for="publisher" class="col-xs-2 control-label no-padding-right">
                                                                                        出版社:
                                </label>
                                <div class="col-xs-10">
                                   <input type="text" class="col-xs-8" name="publisher" value="${book.publisher }" placeholder="出版社" id="publisher" /> 
                                </div>
                            </div>
                            <div class="space-4">
                            </div>
                            <div class="form-group">
                                <label for="price" class="col-xs-2 control-label no-padding-right">
                                                                               图书价格:
                                </label>
                                <div class="col-xs-10">
                                   <input type="text" class="col-xs-8" name="price"  value="${book.price }" placeholder="图书价格" id="price" /> 
                                </div>
                            </div>
                            <div class="space-4">
                            </div>
                            <div class="form-group">
                                <label for="collectDay" class="col-xs-2 control-label no-padding-right">
                                                                              入馆时间 :
                                </label>
                                <div class="col-xs-10">
                                   <input type="text" class="col-xs-8" value="${book.collectDay }" name="collectDay" placeholder="入馆时间" id="collectDay" /> 
                                </div>
                            </div>
                            <div class="space-4">
                            </div>
                            <div class="form-group">
                                <label for="sumary" class="col-xs-2 control-label no-padding-right">
                                                                                     图书摘要:
                                </label>
                                <div class="col-xs-10">
                                <textarea name="sumary"  class="col-xs-8"  id="sumary" rows="10">
                                  ${book.sumary }
                                </textarea>                                   
                                </div>
                            </div>
                            <div class="space-4">
                            </div>
                            <div class="form-group">
                                 <label for="ddlCate1" class="col-xs-2 control-label no-padding-right">
                                                                                                图书封面
                                </label>
                                <div class="col-xs-10">
                                   <input type="file" name="book_img"  id="form-field-1" /> 
                                   <img src="${book.bimg }" alt="${book.bname }" width="80px" height="80px"/>
                                </div>
                            </div>
                            <div class="space-4">
                            </div>
                            <div class="form-group">
                                <label for="form-field-2" class="col-xs-2 control-label no-padding-right">
                                </label>
                                <div class="col-xs-10">
                                    <input type="submit" value="保存图书信息" class="btn btn-primary" />
                                </div>
                            </div>
                            </form>
                            <!-- PAGE CONTENT ENDS -->
                        </div>
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.page-content -->
            </div>
            <!-- /.main-container-inner -->
            <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse"><i class="icon-double-angle-up icon-only bigger-110">
            </i></a>
        </div>
        <!-- /.main-container -->
        <script src='${basePath}/ACE/js/jquery-2.0.3.min.js' type="text/javascript"></script>
        <script type="text/javascript">
            if ("ontouchend" in document) document.write("<script src='${basePath}/ACE/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
        </script>
        <script src="${basePath}/ACE/js/bootstrap.min.js" type="text/javascript"></script>
        <script src="${basePath}/ACE/js/typeahead-bs2.min.js" type="text/javascript"></script>
        <script src="${basePath}/ACE/js/ace-elements.min.js" type="text/javascript"></script>
        <script src="${basePath}/ACE/js/ace.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="data.js"></script>
        <script type="text/javascript">

        $(function(){
       	 
       	 $("input:file").change(function(event){
       		 //获取选择的文件 
       		 var file=event.target.files[0];
       		 //获取读取文件的对象
       		 var reader=new FileReader();
       		 //读取文件  
       		 reader.readAsDataURL(file);
       		 //文件加载完毕后   
       		 reader.onload=function(ev){
       			 $("img").attr("src",ev.target.result);            			 
       		 }
       		 
       		 
       	 });
       	 
       	 
       	 
        });

        </script>
</body>
</html>